<template>
  <div class="footprint" v-if="show">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :offset="10" :error.sync="err" error-text="加载失败，点击这里重试">
      <div class="Box" v-for="(item, index) in footList" :key="index">
        <h3>{{ item[0].date }}</h3>
        <div class="foodBox">
          <div class="food" v-for="(ele, index1) in item" :key="index1" @click="jumpToProduct(ele)">

            <div class="image">
              <van-image :src="`${resourceURL}${ele.imageurl}`" :fit="cover" />
            </div>
            <div class="right">
              <div class="name">{{ele.date}}</div>
              <div class="bottom">
                <div class="price">￥{{ ele.mprice }}</div>
                <van-button @click.stop="goShop(item.product_id)">进入店铺</van-button>
              </div>

            </div>

          </div>
        </div>
      </div>

    </van-list>
    <van-empty description="暂无足迹" v-if="footList.length==0" />

  </div>
</template>
<script>
export default {
  data () {
    return {
      footList: [],
      show: [],
      loading: false,
      finished: false,
      page: 1,
      err: false,
    };
  },
  methods: {
    onLoad () {

      this.page++

      this.GetFootprintList();

    },
    //获取我的足迹
    GetFootprintList () {
      this.loading = true
      this.$axios
        .get(this.$api.GetFootprintList, {
          params: {
            page: this.page,
          },
        })
        .then((res) => {


          if (res.data.code == 1) {
            this.loading = false

            if (res.data.last_page == res.data.current_page) {
              this.finished = true
            } else {
              this.finished = false
            }

            this.footList = this.footList.concat(res.data.data)

          } else {
            this.err = true;
            this.loading = false;
          }
        });
    },
    // 查看店铺
    goShop (id) {
      this.$router.push({ name: 'store', query: { id: id } });
    },
    jumpToProduct (item) {

      this.$router.push({
        name: 'product',
        query: {
          id: item.product_id
        }

      })
    },
  },
  watch: {},
  created () {
    this.GetFootprintList();
  },
  mounted () { },
  computed: {},
};
</script>
<style scoped lang="less">
.footprint {
  min-height: 100vh;
}
.image {
  /deep/ .van-image {
    width: 88px;
    height: 88px;
  }
}
h3 {
  font-size: 16px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #303030;
  margin-left: 18px;
}
.foodBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  .food {
    display: flex;
    margin-top: 12px;
    align-items: center;
    width: 343px;
    height: 112px;
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    border: 1px solid #f2f2f2;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 6px;
  }
  .right {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 12px;
    height: 100%;
    .bottom {
      display: flex;
      justify-content: space-between;
      button {
        width: 74px;
        height: 24px;
        background: #ff7733;
        border-radius: 12px 12px 12px 12px;
        font-size: 12px;
        white-space: nowrap;
        color: #fff;
      }
    }
  }
  .name {
    font-size: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 2; //行数
    line-clamp: 2;
    -webkit-box-orient: vertical; //盒子中内容竖直排列

    color: #303030;
  }
  .price {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    color: #fb2b2c;
  }
}
</style>
